@import url("https://fonts.googleapis.com/css?family=Lato");

*, *::before, *::after {
	box-sizing: inherit;
}

body, input {
	font-family: Lato, sans-serif;
}

body {
	counter-reset: h3;
	box-sizing: border-box;
}

p img {
	float: right;
}

h2 {
	clear: both;
}

@media (max-width: 550px) {
	body > p:first-of-type, h1 {
		text-align: center;
	}

	p img {
		float: none;
	}
}

form {
	h3 {
		clear: both;
		margin-top: 0;
		padding-top: 1em;
	}

	h3::before {
		counter-increment: h3;
		content: "— " counter(h3) ". ";
	}

	div {
		float: left;
		padding: 0.3em;
		width: 24%;
		margin-right: 1%;
		margin-bottom: 1%;
		height: 8em;

		@media (max-width: 1023px) {
			width: 32%;
		}

		@media (max-width: 799px) {
			width: 49%;
		}

		@media (max-width: 539px) {
			width: 100%;
			margin-right: 0;
		}

		&:not(:hover) {
			background-color: #eee;
			opacity: 0.6;
		}

		p {
			font-weight: bold;
			margin-top: 0;

			em {
				font-style: normal;
				display: block;
				font-weight: normal;
			}
		}
	}

	[type=submit] {
		font-weight: bold;
		font-size: 150%;
	}
}


[type=range] {
	background-color: transparent;
	width: 100%;
	margin: 0;
}

#output {
	& > div {
		float: left;
	}

	&:not(.raster) .raster, &:not(.vector) .vector { display: none; }

	textarea {
		margin-top: 0.5em;
		width: 100%;
		height: 6em;
	}
}

footer {
	clear: both;
	padding-top: 2em;
	text-align: center;
}
